<template>
  <div class="menu">
    <div style="padding: 16px; color: #778dff; font-weight: bolder; font-size: 20px;border-bottom: 1px solid #778dff; border-top: 1px solid #778dff;">目录</div>
    <el-menu class="menu-ul" >
      <el-menu-item index="1" >
         <span class="collapse-title" slot="title">现在单位或曾在单位</span>
      </el-menu-item>
      <el-menu-item index="2">
          <span class="collapse-title" slot="title">学者关注点</span>
      </el-menu-item>
      <el-submenu index="3">
          <span class="collapse-title" slot="title">汇聚学术成果</span>
        <el-menu-item-group>
          <el-menu-item index="3-1">
            <span>认领曾在单位成果</span>
          </el-menu-item>
          <el-menu-item index="3-2">
            <span>文献检索认领</span>
          </el-menu-item>
          <el-menu-item index="3-3">
            <span>文献管理</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
          <span class="collapse-title" slot="title">展示全部成果</span>
        <el-menu-item-group>
          <el-menu-item index="4-1">
            <span>项目1</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
          <span class="collapse-title" slot="title">学术影响力分析</span>
        <el-menu-item-group>
          <el-menu-item index="5-1">
            <span>分析1</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="6">
          <span class="collapse-title" slot="title">学术关系网络</span>
      </el-menu-item>
      <el-submenu index="7">
          <span class="collapse-title" slot="title">所在领域研究现状</span>
        <el-menu-item-group>
          <el-menu-item index="7-1">
            <span>现状1</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'UserMenu'
}
</script>

<style scoped>

/*菜单关闭*/
.el-submenu /deep/ .el-submenu__title .el-submenu__icon-arrow{
  -webkit-transform: rotateZ(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotateZ(-90deg);
}
/*菜单展开*/
.el-submenu.is-opened /deep/ .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  transform: rotateZ(0deg);
}
.menu{background: #fff; width: 300px; margin-top: 15px; text-align: left; color: #737373}
.collapse-title{
  font-size: 15px;
}
</style>